<style>
.el-collapse {
    width: 60%;
    margin: 0 auto;
    margin-top: 80px;
}
.active{
    color: #409EFF;
}
.el-collapse-content>div{
    height: 500px;
    background-color: #eee;
    border-radius:10px ;
}
.back{
    background-color: #F5F5F5;
}
.el-collapse-title .el-col{
    padding: 20px 35px;
    background-color: #fff;
    margin-right: 20px;
    border-radius: 10px 10px 0 0;
    font-size: 20px;
    font-weight: 800;
}
.el-collapse-content{
    background-color: #fff;
    padding: 18px 60px;
}
.collapseList{
    margin-top: 20px;
}
.collapseList .collapseItem{
    padding: 40px 10px;
    margin-bottom:5px ;

}
.collapseDetail{
    border-top:1px solid #000 ;
    margin-top:20px ;
    padding-top: 20px;
    display: none;
}
/* .collapseItem .collapseDetail{
    display: block;
}  */
.custom-display {
    display: none;
    
}
/* 移动端 */
@media (min-width: 700px) {
    .custom-display{
        display:block;
    }
}

/* 根据媒体查询控制显示 */
@media (max-width: 375px) {
    .customer-yd {
        display: block;
    }
}


/* 根据媒体查询控制显示 */
@media (min-width: 376px) {
  .customer-yd {
    display: none;
  }
}


.el-collapse-yd{
    margin: 0;
    margin-top:20px ;
    text-align: center;
}

.el-collapse-title-yd div{
    padding: 15px 10px 0;
    border-radius:10px 10px 0 0  ;
    
}
.el-collapse-title-yd .el-col div{
    background-color: #fff;
    font-size: 20px;
    font-weight: 900;
}
.el-collapse-content-yd{
    padding: 0 10px;
    
}
.el-collapse-content-yd .collapseItem-yd{
    background-color: #fff;
}
.el-collapse-item {
    max-height: 300px; /* 设置一个固定的高度 */
    overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
<template>
  <div>
    <!-- pc端口 -->
    <div class="custom-display">
        <swipers></swipers>
        <el-row class="back">
            <el-row class="el-collapse">
                <el-row class="el-collapse-title">
                    <el-col :span="4" >
                        <div @click="currentTab = 'xx'"
                        :class="currentTab == 'xx'?'active':''">
                            校招
                        </div>
                    </el-col>
                    <el-col :span="6" >
                        <div @click="currentTab = 'sh'"
                        :class="{ active: currentTab === 'sh' }">
                            社会招聘
                        </div>
                    </el-col>
                </el-row>
                <el-row class="el-collapse-content">
                    <div class="el-collapse-item" v-if="currentTab === 'xx'" >
                        <el-collapse accordion class="collapseList" style="width: 100%;height: 100%;" >
                            <el-collapse-item v-for="(item, index) in dataList"
                            :key="index">
                                <template slot="title" >
                                    <div style="display: flex;justify-content: space-between;width: 100%;">
                                        <span>招牌职位:{{ item.createBy }}</span>
                                   <span> 薪资:{{ item.salary }}</span>
                                    <span>地址:{{ item.workAddress }}</span>
                                    <span>招聘人:{{ item.issuerBy }}</span>
                                    </div>
                                  
                                </template>
                                <div>  {{ item.workRequirements }}</div>
                                
                            </el-collapse-item>
                        
                        </el-collapse>
                       
                    </div>
                    <div class="el-collapse-item" v-if="currentTab === 'sh'" >
                        <el-collapse accordion class="collapseList" style="width: 100%;height: 100%;" >
                            <el-collapse-item v-for="(item, index) in dataList"
                            :key="index">
                                <template slot="title" >
                                    <div style="display: flex;justify-content: space-between;width: 100%;">
                                        <span>招牌职位:{{ item.createBy }}</span>
                                   <span> 薪资:{{ item.salary }}</span>
                                    <span>地址:{{ item.workAddress }}</span>
                                    <span>招聘人:{{ item.issuerBy }}</span>
                                    </div>
                                  
                                </template>
                                <div>  {{ item.workRequirements }}</div>
                                
                            </el-collapse-item>
                        
                        </el-collapse>
                      
                    </div>
                </el-row>
            </el-row>
        </el-row>
    </div>
    <!-- 移动端口 -->
    <div class="customer-yd">
        <swipers></swipers>
        <el-row class="back">
            <el-row class="el-collapse-yd">
                <el-row class="el-collapse-title-yd">
                    <el-col :span="12" >
                        <div @click="currentTab = 'xx'"
                        :class="currentTab == 'xx'?'active':''">
                            校招
                        </div>
                    </el-col>
                    <el-col :span="12" >
                        <div @click="currentTab = 'sh'"
                        :class="{ active: currentTab === 'sh' }">
                            社会招聘
                        </div>
                    </el-col>
                </el-row>
                <el-row class="el-collapse-content-yd">
                    <div class="el-collapse-item" v-if="currentTab === 'xx'">
                        <el-row class="collapseList">
                            <el-row class="collapseItem-yd" style="padding-left:10px ;margin-bottom: 10px;">
                                <el-row style="padding: 15px 0 0 0 ;">
                                    <el-col :span="16" style="font-weight: 800;text-align: left;">招聘职位:
                                        <span style="font-weight: 800;">恶无非</span>
                                    </el-col>
                                    <el-col :span="8" style="font-weight: 600;color:#409EFF ;text-align: center;line-height: 25px;">8k-10k</el-col>
                                </el-row>
                                <el-col style="font-weight: 800;text-align: left;padding: 15px 0;" >地址:</el-col>
                                <el-col style="display: flex;">
                                    <div class="img-header" style="width: 25px;height: 25px;margin-right: 15px;" >
                                        <img src="../../public/img/icons/android-chrome-192x192.png" alt=""  style="width: 100%;height: 100%;  border-radius: 50%;">
                                    </div>
                                    <div style="font-weight: 800;">
                                        招聘人:
                                        <span></span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="collapseItem-yd" style="padding-left:10px ;margin-bottom: 10px;">
                                <el-row style="padding: 15px 0 0 0 ;">
                                    <el-col :span="16" style="font-weight: 800;text-align: left;">招聘职位:
                                        <span style="font-weight: 800;">恶无非</span>
                                    </el-col>
                                    <el-col :span="8" style="font-weight: 600;color:#409EFF ;text-align: center;line-height: 25px;">8k-10k</el-col>
                                </el-row>
                                <el-col style="font-weight: 800;text-align: left;padding: 15px 0;" >地址:</el-col>
                                <el-col style="display: flex;">
                                    <div class="img-header" style="width: 25px;height: 25px;margin-right: 15px;" >
                                        <img src="../../public/img/icons/android-chrome-192x192.png" alt=""  style="width: 100%;height: 100%;  border-radius: 50%;">
                                    </div>
                                    <div style="font-weight: 800;">
                                        招聘人:
                                        <span></span>
                                    </div>
                                </el-col>
                            </el-row>
                            
                            <el-row class="collapseItem-yd" style="padding-left:10px ;margin-bottom: 10px;">
                                <el-row style="padding: 15px 0 0 0 ;">
                                    <el-col :span="16" style="font-weight: 800;text-align: left;">招聘职位:
                                        <span style="font-weight: 800;">恶无非</span>
                                    </el-col>
                                    <el-col :span="8" style="font-weight: 600;color:#409EFF ;text-align: center;line-height: 25px;">8k-10k</el-col>
                                </el-row>
                                <el-col style="font-weight: 800;text-align: left;padding: 15px 0;" >地址:</el-col>
                                <el-col style="display: flex;">
                                    <div class="img-header" style="width: 25px;height: 25px;margin-right: 15px;" >
                                        <img src="../../public/img/icons/android-chrome-192x192.png" alt=""  style="width: 100%;height: 100%;  border-radius: 50%;">
                                    </div>
                                    <div style="font-weight: 800;">
                                        招聘人:
                                        <span></span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="collapseItem-yd" style="padding-left:10px ;margin-bottom: 10px;">
                                <el-row style="padding: 15px 0 0 0 ;">
                                    <el-col :span="16" style="font-weight: 800;text-align: left;">招聘职位:
                                        <span style="font-weight: 800;">恶无非</span>
                                    </el-col>
                                    <el-col :span="8" style="font-weight: 600;color:#409EFF ;text-align: center;line-height: 25px;">8k-10k</el-col>
                                </el-row>
                                <el-col style="font-weight: 800;text-align: left;padding: 15px 0;" >地址:</el-col>
                                <el-col style="display: flex;">
                                    <div class="img-header" style="width: 25px;height: 25px;margin-right: 15px;" >
                                        <img src="../../public/img/icons/android-chrome-192x192.png" alt=""  style="width: 100%;height: 100%;  border-radius: 50%;">
                                    </div>
                                    <div style="font-weight: 800;">
                                        招聘人:
                                        <span></span>
                                    </div>
                                </el-col>
                            </el-row>
                          
                        </el-row>
                    </div>
                    <div class="el-collapse-item" v-if="currentTab === 'sh'">
                        <el-row class="collapseList">
                            <el-row class="collapseItem-yd" style="padding-left:10px ;margin-bottom: 10px;">
                                <el-row style="padding: 15px 0 0 0 ;">
                                    <el-col :span="16" style="font-weight: 800;text-align: left;">招聘职位:
                                        <span style="font-weight: 800;">恶无非</span>
                                    </el-col>
                                    <el-col :span="8" style="font-weight: 600;color:#409EFF ;text-align: center;line-height: 25px;">8k-10k</el-col>
                                </el-row>
                                <el-col style="font-weight: 800;text-align: left;padding: 15px 0;" >地址:</el-col>
                                <el-col style="display: flex;">
                                    <div class="img-header" style="width: 25px;height: 25px;margin-right: 15px;" >
                                        <img src="../../public/img/icons/android-chrome-192x192.png" alt=""  style="width: 100%;height: 100%;  border-radius: 50%;">
                                    </div>
                                    <div style="font-weight: 800;">
                                        招聘人:
                                        <span></span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="collapseItem-yd" style="padding-left:10px ;margin-bottom: 10px;">
                                <el-row style="padding: 15px 0 0 0 ;">
                                    <el-col :span="16" style="font-weight: 800;text-align: left;">招聘职位:
                                        <span style="font-weight: 800;">恶无非</span>
                                    </el-col>
                                    <el-col :span="8" style="font-weight: 600;color:#409EFF ;text-align: center;line-height: 25px;">8k-10k</el-col>
                                </el-row>
                                <el-col style="font-weight: 800;text-align: left;padding: 15px 0;" >地址:</el-col>
                                <el-col style="display: flex;">
                                    <div class="img-header" style="width: 25px;height: 25px;margin-right: 15px;" >
                                        <img src="../../public/img/icons/android-chrome-192x192.png" alt=""  style="width: 100%;height: 100%;  border-radius: 50%;">
                                    </div>
                                    <div style="font-weight: 800;">
                                        招聘人:
                                        <span></span>
                                    </div>
                                </el-col>
                            </el-row>
                            
                            <el-row class="collapseItem-yd" style="padding-left:10px ;margin-bottom: 10px;">
                                <el-row style="padding: 15px 0 0 0 ;">
                                    <el-col :span="16" style="font-weight: 800;text-align: left;">招聘职位:
                                        <span style="font-weight: 800;">恶无非</span>
                                    </el-col>
                                    <el-col :span="8" style="font-weight: 600;color:#409EFF ;text-align: center;line-height: 25px;">8k-10k</el-col>
                                </el-row>
                                <el-col style="font-weight: 800;text-align: left;padding: 15px 0;" >地址:</el-col>
                                <el-col style="display: flex;">
                                    <div class="img-header" style="width: 25px;height: 25px;margin-right: 15px;" >
                                        <img src="../../public/img/icons/android-chrome-192x192.png" alt=""  style="width: 100%;height: 100%;  border-radius: 50%;">
                                    </div>
                                    <div style="font-weight: 800;">
                                        招聘人:
                                        <span></span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="collapseItem-yd" style="padding-left:10px ;margin-bottom: 10px;">
                                <el-row style="padding: 15px 0 0 0 ;">
                                    <el-col :span="16" style="font-weight: 800;text-align: left;">招聘职位:
                                        <span style="font-weight: 800;">恶无非</span>
                                    </el-col>
                                    <el-col :span="8" style="font-weight: 600;color:#409EFF ;text-align: center;line-height: 25px;">8k-10k</el-col>
                                </el-row>
                                <el-col style="font-weight: 800;text-align: left;padding: 15px 0;" >地址:</el-col>
                                <el-col style="display: flex;">
                                    <div class="img-header" style="width: 25px;height: 25px;margin-right: 15px;" >
                                        <img src="../../public/img/icons/android-chrome-192x192.png" alt=""  style="width: 100%;height: 100%;  border-radius: 50%;">
                                    </div>
                                    <div style="font-weight: 800;">
                                        招聘人:
                                        <span></span>
                                    </div>
                                </el-col>
                            </el-row>
                          
                        </el-row>
                    </div>
                </el-row>
            </el-row>
        </el-row>
    </div>
   
  </div>
</template>
<script>
    import swipers from '@/components/swiperImg.vue'
    import {join,login} from  '../../request/api/all'
    export default {
        components:{
            swipers
        },
        data() {
            return {
                currentTab: 'xx', // 默认显示校招
                dataList:[],
                expandedItems: []
            }
        },
        methods:{
            async getData(){
                let params = {  
                    id:948,
                    jobEmail:"",
                    positionName:"",
                    salary:0,
                    status:0,
                    type:0,
                    viewCount:0,
                    workAddress:"",
                    workRequirements:""
                }
                let res = await join(params)
                console.log(res)  
                this.dataList = res.data.data
                console.log("数据",this.dataList)
            },
            async logins() {
                const loginData = {
                    account: 'admin',
                    password: 'admin'
                };
                try {
                    const response = await login(loginData);

                    const token = response.data.data.token;
                    console.log('登录成功，token:', token);
                    
                    // 将token存储在localStorage或Vuex中
                    localStorage.setItem('token', token);
                   
                } catch (error) {
                    console.error('登录失败:', error);
                }
            },
            // toggleDetail(index) {
            //     console.log('dianji')
            //     // 切换展开状态
            //     this.$set(this.expandedItems, index, !this.expandedItems[index]);
            // },
        },
        created(){
            this.logins()
            this.getData()
        }
    }
</script>